<template>
  <div class="LoginBody">
    <h1>河北省基层医疗卫生机构管理信息系统</h1>
    <div class="LoginLogo">
      <img src="../assets/images/logo.png" alt="" />
    </div>
    <div class="LoginForm">
      <p>用户登录</p>
      <div class="content">
        <el-form :model="submitParams" ref="login" class="loginForm">
          <el-form-item label="账号：" prop="username">
            <el-input type="text" v-model="submitParams.username">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="submitParams.password">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <key />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码：" prop="password">
            <div class="code">
              <el-input
                type="code"
                @keydown.enter="Login"
                v-model="submitParams.code"
              >
              </el-input>
              <SIdentify
                :identifyCode="identifyCode"
                @click="refreshCode"
              ></SIdentify>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="Login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import SIdentify from "./utils/Identify.vue";
import { ElMessage } from "element-plus";
import { ToLogin } from "@/api/login.js";
export default {
  name: "Login",
  components: { SIdentify },
  data() {
    return {
      submitParams: {
        username: "",
        password: "",
        code: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入6-10位账号",
            pattern: /^[\w-]{6,10}$/,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      identifyCode: "",
      identifyNums: "1234567890",
      identifyLetters: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
      dialogRegisterVisible: false,
      activeName: ref("login"),
      resicode: "",
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == "register") {
        this.dialogRegisterVisible = true;
      }
    },
    SubmitRegister() {
      this.dialogRegisterVisible = false;
      ElMessage({
        message: "提交注册申请成功",
        type: "success",
      });
      console.log(this.rform);
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },
    Login() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          if (
            this.submitParams.code.toLowerCase() ==
            this.identifyCode.toLowerCase()
          ) {
            ToLogin(this.submitParams).then((res) => {
              if (res.data.code == 300) {
                ElMessage({
                  message: "登录成功",
                  type: "success",
                });
                localStorage.setItem("role", 2);
                localStorage.setItem("username", this.submitParams.username);
                this.$router.push("/apply/account");
                return;
              }
              if (res.data.code == 202) {
                ElMessage({
                  message: "密码错误,请重新输入。",
                  type: "warning",
                });
                this.refreshCode();
                this.resetForm();
              }
              if (res.data.code == 500) {
                ElMessage({
                  message: "账号不存在,请检查无误后重新输入。",
                  type: "warning",
                });
                this.refreshCode();
                this.resetForm();
              }
            });
          } else {
            ElMessage({
              message: "验证码错误",
              type: "warning",
            });
            this.refreshCode();
            this.submitParams.code = "";
          }
        }
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(4);
    },
    makeCode(l) {
      for (let i = 0; i < l; i++) {
        if (this.randomNum(0, 10) < 5) {
          this.identifyCode +=
            this.identifyNums[this.randomNum(0, this.identifyNums.length)];
        } else {
          this.identifyCode +=
            this.identifyLetters[
              this.randomNum(0, this.identifyLetters.length)
            ];
        }
      }
      console.log(this.identifyCode);
    },
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(4);
  },
};
</script>
<style scoped lang="scss">
.LoginBody {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/loginback.jpg");
  background-size: cover;

  h1 {
    padding-top: 100px;
    font-size: 40px;
    z-index: 1;
    text-align: center;
  }

  .LoginLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50vw;
    height: 70vh;
    position: absolute;
    left: 0;
    top: 150px;
    margin-left: 40px;

    img {
      width: 600px;
    }
  }

  .LoginForm {
    box-shadow: 20px -20px #4cb3db;
    background: #fff;
    right: 180px;
    position: absolute;
    width: 30vw;
    height: 50vh;
    margin-top: 80px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
      text-align: center;
      font-size: 20px;
    }

    .loginForm {
      border-radius: 20px;
      width: 400px;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      ::v-deep .el-form-item__label {
        width: 105px;
        font-size: 20px;
        margin-top: 3px;
        color: #000;
      }

      .code {
        display: flex;

        .el-input {
          margin-right: 38px;
          width: 100px;
        }
      }

      .el-input {
        width: 250px;
        height: 40px;
        font-size: 20px;
      }

      .el-button {
        width: 205px;
        height: 40px;
        margin: 0 auto;
      }
    }
  }
}
</style>
